<template>

	<div class="content">
		<div class="area_box">
					<div class="cat_hd">购买信息</div>
					<div class="cat_bd">

									<div class="uni-list-chat">
										<div class="item">
											<div class="uni-list-cha-image">
												<img src="https://img.36krcdn.com/20200411/v2_2204c6132432403184e43df22485545e_img_000?x-oss-process=image/resize,m_mfit,w_432,h_288/crop,w_432,h_288,g_center"/>
											</div>
											<div class="uni-list-chat-content-extra">
												<div>【可二次 分装数量5 特效枪数量1 套装数量77】 和生活对线去了</div>
												<div style="color:#AAAAAA;font-size: 12px;">游戏区服：零点忘忧</div>
											</div>
										</div>
										
										<div class="item">
											<div class="zhong-text">1508.00 X 1</div>
									</div>
									</div>

								

					</div>
			</div>
			<div class="area_box">
					<div class="cat_hd">订单号：123456789</div>
					<div class="cat_bd">
							<div class="general">
									<div class="pay-l">确认支付</div>

									<div class="pay-r">
										支付：<span>1508.00</span>
									</div>

							</div>
							<div class="cat-bd-con">
									<div class="con-t-text">选择支付方式:</div>
									<div class="con-t-select">

											<el-radio-group v-model="radio" class="con-t-select-radio">
													<el-radio :label="3">
															<img class="con-t-alipay" src="../assets/images/t-12.png"/>支付宝
													</el-radio>
													<el-radio :label="6"><img class="con-t-watpay" src="../assets/images/t-13.png"/>微信</el-radio>
											</el-radio-group>
														
	
									</div>

							</div>
					</div>
					<div  class="goBuy"  @click="goBuy">立即支付</div>

			</div>

			<div class="popup-box" v-show="qrCodeUrlcod">
					<div class="popup-content" v-if="!isPayStatus">
						<div>订单号：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
						<div style="margin-bottom: 10px;">付款金额：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
						<div class="qrCodeUrl"  ref="qrCodeUrl" v-if="!isOut" ></div>
						<div class="out" v-if="isOut">支付超时...</div>
						<div style="text-align: center; margin-top: 10px;">
							<img  class="con-t-watpay" src="../assets/images/t-12.png" />请使用支付宝APP扫描二维码支付。
						</div>
					</div>
					<div class="popup-content" v-if="isPayStatus">
							<div class="isPayStatus-box">
									<div class="isPayStatus-hd">
										<img src="../assets/images/t-10.png" />
										订单支付成功
									</div>
									<div class="isPayStatus-bd">
										<div class="isPayStatus-item">
											<div class="text-itme-l">订单号</div>
											<div class="text-itme-r">51268989562626</div>
										</div>
										<div class="isPayStatus-item">
											<div class="text-itme-l">支付方式</div>
											<div class="text-itme-r">微信支付</div>
										</div>
										<div class="isPayStatus-item">
											<div class="text-itme-l">订单金额</div>
											<div class="text-itme-r">365.26</div>
										</div>
									</div>
									<div class="isPayStatus-fd">
										<div class="isPayStatus-fd-l-but">查看订单</div>
										<div class="isPayStatus-fd-r-but">返回首页</div>
									</div>
							</div>
					</div>
			</div>
					
	
	</div>

</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				qrCodeUrlcod: false,
				isPayStatus:false,
				isOut:false,
				radio:3
			}
		},

		methods: {

				goBuy() {
					this.qrCodeUrlcod=true
					this.creatQrCode("3213213132")
					
				},
				creatQrCode (url) {
					var qrcode = new QRCode(this.$refs.qrCodeUrl, {
						text: url, // 需要转换为二维码的内容
						width: 320,
						height:320,
						colorDark: '#000000',
						colorLight: '#ffffff',
						correctLevel: QRCode.CorrectLevel.H
					})
				}
		}
	}
</script>

<style lang="less" scoped>
.isPayStatus-fd{

}
.isPayStatus-fd div{
	width: 45%;
	height: 44px;
	font-size: 16px;
	font-family: SimHei;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	line-height: 44px;
	border: 1px solid #D82241;
	cursor: pointer;
}
.isPayStatus-fd-l-but{
	background: #DA2740;
}
.isPayStatus-fd-r-but{
	color: #D82241 !important;
	background: #FFF9F8;
	
}
.isPayStatus-fd , .isPayStatus-item{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 30px;

}
.text-itme-l{
	font-size: 16px;
	font-family: SimHei;
	font-weight: 600;
	color: #444444;
	flex:1;
	margin-right: 20px;
}
.text-itme-r{
	font-size: 16px;
	font-family: SimHei;
	font-weight: 400;
	color: #888888;
	flex: 3;
}
.isPayStatus-box{
	padding: 30px 10px;
}
.isPayStatus-hd{
	display: flex;
	align-items: center;
	justify-content: center;
}
.isPayStatus-hd  img{
	width: 42px;
	height: 42px;
	margin-right: 20px;
}
.isPayStatus-bd{
	border: 1px solid #EFEFEF;
	border-left: none;
	border-right: none;
	padding: 20px 10px;
	margin: 20px 0px;
}
.popup-box{
	background: #00000080;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.popup-content{
	padding: 15px;
	background: #FFFFFF;
	white-space: nowrap;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 350px;
	height: 460px;
	 border-radius:5px ;

}
.content{
	min-width: 66%;
	background: #FFFFFF;
	border-radius: 10px;
	margin-top: 30px;
	padding-bottom: 40px;
}
.area_box{
	width: 90%;
	margin:0px auto;
}
 
.cat_bd{
	border: 1px solid #EEEEEE;
	padding: 30px;
}
 

.cat-bd-con{
	border-top: 1px solid #EEEEEE;
	margin-top: 40px;
	padding-top: 30px;
	margin-bottom: 20px;
}

.pay-l{
	font-size: 18px;
	font-family: SimHei;
	font-weight: 600;
	color: #444444;
	height: 40px;
	line-height: 40px;
	padding-left:60px;
	background: url('../assets/images/t-14.png') no-repeat;
	background-size: contain
}
.pay-r{
	font-size: 16px;
	font-family: SimHei;
	font-weight: 600;
	color: #444444;
}
.pay-r span{
	font-size: 26px;
	font-weight:bold;
	color: #DA2740;
}
.con-t-text{
	font-size: 18px;
	font-weight: bold;
	color: #444444;
}

.con-t-select{
	margin-top: 30px;
}
.con-t-select label{
	display: inline-block;
	margin-right: 50px;
	border: 1px solid #EEEEEE;
	padding: 5px 10px;
	box-sizing: border-box;
	margin-top: 10px;
}
.con-t-select label img{
	width: 24px;
	height: 24px;
}
.con-t-alipay{
	vertical-align: middle;
	margin: 0px 10px;
}
.con-t-watpay{
	width: 34px;
	height: 28px;
	vertical-align: middle;
	margin: 0px 10px;
}


.goBuy{

	width: 170px;
	height: 40px;
	line-height: 40px;
	background: #DA2740;
	color: #FFFFFF;
	font-size: 18px;
	font-family: SimHei;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	cursor: pointer;
	margin-top: 40px;
	white-space: nowrap;
	margin-left: 10%;

	
}
.out{
	width: 350px;
	height: 350px;
	background:#f5f7fa  url('../assets/images/t-15.png') no-repeat center center;
	line-height: 580px;
    color: #bbb;
	text-align: center;
	font-size: 28px;
}
.qrCodeUrl{
 text-align: center; width: 320px; height: 320px;  margin: auto;position: relative;
}

.cat_hd{
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	font-weight:bold;
	color: #444444;
	margin-top: 40px;
}
 
.item{
	display: flex;
	flex-direction: row;
	align-items: center;
 

	
}

.uni-list-chat{
	 display:flex;
}

.uni-list-chat .item:nth-child(1){
	width: 80%;
}
.uni-list-chat .item:nth-child(2){
	width: 20%;
}
.uni-list-cha-image, .uni-list-cha-image img{
	width: 60px;
	height: 60px;
}
.uni-list-chat-content-extra{

	font-size: 14px;
	font-family: SimHei;
	font-weight: 400;
	color: #444444;
	line-height: 20px;
	margin-left: 15px;

}
.zhong-text{
	border-left: 1px solid #EEEEEE;
	height: 60px;
	line-height: 60px;
	border-bottom: 0px;
	border-top: 0px;
 	width: 100%;
	text-align: center;
	font-weight:bold;
	font-size: 16px;

}
.you-text{
	text-align: center;
	width: 70%;
	padding: 40px 0px;
}
.con-t-select-radio{
	width: 100%;
}
</style>
